<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

        <script type="text/javascript">
            const siteUrl = "./",
                musicMp3 = "media/bgm.mp3"
        </script>

        <link rel="stylesheet" href="css/music.css" type="text/css" />
        <link rel="stylesheet" href="css/animate.css" type="text/css" />
        <link rel="stylesheet" href="css/common.css" type="text/css" />
	</head>
	<body>

        <div class="pop-share-box flex">
            <img src="images/share_img.png" alt="" />
            <button id="closeShare">知道了 <span id="count">5</span>s</button>
        </div>

        <img id="target" src="images/poster_img.jpg" width="100%" alt="" />
        <div class="page poster" id="poster" style="display: none;">
            <img src="images/poster_bg.jpg" width="100%" alt="" />
            <div class="person-box male"></div>
            <div class="poster-bottom-box">
                <div class="poster-bottom-box-user flex">
                    <img src="images/user_demo_img.jpg" alt="" />
                    <div>
                        <h1>这里是昵称</h1>
                        <p>我的冲天战绩 <span>666</span> 米</p>
                    </div>
                </div>
                <img class="poster-slogan" src="images/poster_slogen_img1.png" alt="" />
                <div class="poster-qr-box flex">
                    <img src="images/poster_text.png" alt="" />
                    <img src="images/qr_code_img.jpg" alt="" />
                </div>
            </div>
        </div>

        <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
        <script type="text/javascript" src="js/music.js"></script>
        <script type="text/javascript">
            $(document).ready(function (e) {
                $('#musicMenu').hide();

                $('#closeShare').click(function (e) {
                    $('.pop-share-box').hide();
                    clearInterval(countRound);
                });

                let countNum = 5;
                let countRound = setInterval(function () {
                    if (countNum == 0) {
                        $('.pop-share-box').hide();
                        clearInterval(countRound);
                    }
                    countNum --;
                    $('#count').html(countNum);
                },1000);
            });
            // $(document).ready(function (e) {
            //     setTimeout(takeScreenshot,4000);
            // });
            //
            // function takeScreenshot() {
            //     html2canvas(document.querySelector("#poster"),{onrendered:function(canvas){},useCORS: true}).then(canvas => {
            //         var img = document.querySelector('#target');
            //         img.src = canvas.toDataURL("image/png");
            //         img.style.display = 'block';
            //         $('#poster').hide();
            //     });
            // }
        </script>
	</body>
</html>
